<template>
	<view class="max-box">
		<view class="shopping-header">
			<view class="header-title">
				<u-checkbox-group>
					<u-checkbox v-model="checked" activeColor="red" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="store-name" @click="shopName">
					<view class="self-employed">自营</view>
					<view class="shop-name">官方自营综合店</view>
					<u-icon name="arrow-right" color="black" size="23"></u-icon>
				</view>
			</view>
			<u-line type="info"></u-line>
			<u-swipe-action class="slide-cells">
				<u-swipe-action-item :options="options1">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<u-checkbox-group>
								<u-checkbox v-model="checked" activeColor="red" shape="circle"></u-checkbox>
							</u-checkbox-group>
							<view class="detail">
								<view class="detail-left" @click="shoppingItems">
									<image src="/static/logo.png" class="detail-image" mode=""></image>
									<view class="detail-font">
										<view class="font-name">iphone12mini</view>
										<view class="font-model">黑色,64GB</view>
										<view class="font-price">￥<text class="price">4369</text></view>
									</view>
								</view>
								<view class="detail-right">
									<u-number-box v-model="commodityNumberData"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<!-- 好物优选 -->
		<view class="good-things-preferred">
			<view class="stuff-optimization">
				<view class="stuff-title">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
						<view class="" style="flex-shrink: 0;display: flex;">
							<view class="stuff-title-font" v-for="(item,index) in optimizationData" :key="index"
								@click="changeStyle(index)">
								<view class="stuff-title-top"
									:class="optimization == index? 'stuff-title--top-active' : 'stuff-title-top' ">
									{{ item.topfont }}
								</view>
								<view class="stuff-title-bottom"
									:class="optimization == index? 'stuff-title-bottom-active' : 'stuff-title-bottom' ">
									{{ item.bottomfont }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="stuff-content">
					<view class="stuff-content-box" v-for="(item,index) in stuffData" :key="index" @click="shoppingItems">
						<image :src="item.src" class="stuff-content-image"></image>
						<view>{{ item. name}}</view>
						<view>
							<text class="stuff-content-fontleft">￥{{ item.discount }}</text>
							<text class="stuff-content-fontright">￥{{ item.original }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-left">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" activeColor="red"></u-checkbox>
				</u-checkbox-group>
				<view class="select-all">全选</view>
				<view class="delete">删除</view>
			</view>
			<view class="footer-right">
				<text>合计:</text>
				<text class="footer-price">￥4369</text>
				<view class="checkout" @click="settlement">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滑块单元格
				options1: [{
					text: '删除'
				}],
				// 商品数量
				commodityNumberData: 0,
				// 好物优选
				optimization: '0',
				// 好物优选title
				optimizationData: [{
						topfont: '好物优选',
						bottomfont: '精选推荐'
					},
					{
						topfont: '新品好物',
						bottomfont: '24小时热销'
					},
					{
						topfont: '海外进口',
						bottomfont: '国际进口商品'
					},
					{
						topfont: '热销榜单',
						bottomfont: '热销榜单'
					},
					{
						topfont: '测试001',
						bottomfont: '123'
					},
				],
				// 好物优选商品数据
				stuffData: [{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'Samsung SM-N9860 骁龙865+三星note20官方旗...',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
				]
			}
		},
		methods: {
			// 好物优选点击亮高
			changeStyle(index) {
				this.optimization = index
			},
			// 点击结算跳转结算页面
			settlement() {
				uni.navigateTo({
					url: '/pages/index/checkoutPage/checkoutPage'
				})
			},
			// 购物车商品跳转商品详情
			shoppingItems(){
				uni.navigateTo({
					url:'/pages/index/productDetails/productDetails'
				})
			},
			// 购物车商品店铺名称跳转店铺详情页
			shopName(){
				uni.navigateTo({
					url:'/pages/index/storeDetails/storeDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.max-box {
		background-color: #F6F6F6;
	}

	.shopping-header {
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.header-title {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.self-employed {
		margin-left: 20rpx;
		padding: 10rpx;
		background-color: #FE2C43;
		border-radius: 10rpx;
		color: #fff;
		margin-right: 20rpx;
	}
	
	.shop-name{
		font-size: 45rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.store-name {
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.header-content {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.swipe-action__content {
		display: flex;
		align-items: center;
	}

	.detail {
		display: flex;
		align-items: center;
	}

	.detail-left {
		display: flex;
		align-items: center;
	}

	.detail-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.detail-font {
		margin-left: 20rpx;
	}

	.font-model {
		margin-top: 20rpx;
		color: rgb(146, 146, 146);
	}

	.font-price {
		margin-top: 20rpx;
		color: red;

		.price {
			font-size: 40rpx;
		}
	}

	.detail-right {
		padding-top: 100rpx;
	}

	// 好物优选
	.good-things-preferred {
		margin-top: 20rpx;
		padding: 20rpx 35rpx 20rpx 0rpx;
	}

	.stuff-optimization {
		width: 100%;
		margin: 20rpx 20rpx 0rpx 20rpx;
	}

	.stuff-title {
		width: 100%;
		display: flex;
	}

	.stuff-title-font {
		margin-right: 5%;
	}

	.stuff-title-top {
		font-size: 40rpx;
		text-align: center;
	}

	.stuff-title--top-active {
		font-weight: bold;
		background: linear-gradient(red, white, white);
	}

	.stuff-title-bottom {
		text-align: center;
		color: #ccc;
	}

	.stuff-title-bottom-active {
		color: black;
	}

	.stuff-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.stuff-content-box {
		width: 48%;
		background-color: #fff;
		margin: 20rpx 0 0 0;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stuff-content-image {
		width: 100%;
	}

	.stuff-content-fontleft {
		color: red;
		font-size: 30rpx;
	}

	.stuff-content-fontright {
		color: #ccc;
		text-decoration: line-through;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.select-all {
		margin-left: 20rpx;
		font-size: 40prx;
	}

	.delete {
		margin-left: 20rpx;
		color: red;
	}

	.footer-right {
		display: flex;
		align-items: center;
		font-size: 40rpx;
		padding-right: 40rpx;

		.footer-price {
			color: red;
		}

		.checkout {
			margin-left: 20rpx;
			border-radius: 40rpx;
			padding: 10rpx 50rpx 10rpx 50rpx;
			background-color: #FE3839;
			color: #fff;
		}
	}

	.swipe-action__content.data-v-075fedf4{
		padding:25rpx 0rpx 20rpx 20rpx;
	}

	// 滑块单元格
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>